<template>
	<!-- :style="{height: `calc(100vh - ${statusBarHeight - 10}px)`}" -->
	<view class="wrap">
		<view class="top">
			<!-- 头部 -->
			<custom-header title="同城畅享" :isShowBack="false"></custom-header>
			<!-- 搜索 -->
			<view class="search-box">
				<view class="location">
					<view class="name">重庆</view>
					<u-icon name="arrow-down" color="#fff" size="20rpx" :bold="true"></u-icon>
				</view>
				<view class="search" @click="searchHandle">
					<!-- <image class="search-icon" :mode="item.mode" src="/static/image/home/search.png"></image> -->
					<u-icon name="search" color="#969696" size="33rpx" :bold="true"></u-icon>
					<view class="search-input">输入商家/品类/商圈</view>
				</view>
			</view>
		</view>
		<!-- :style="{height: `calc(100vh - ${screenTop + statusBarHeight}px)`}" -->
		<scroll-view :style="{height: `calc(100vh - ${statusBarHeight + 80}px)`}" scroll-y="true"
			refresher-enabled="true" :refresher-triggered="isRefreshing" :refresher-threshold="100"
			refresher-background="#E1E1E1" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort">
			<!-- :style="{marginTop: `${screenTop + statusBarHeight + 29}px`}" -->
			<view class="content">
				<!-- banner -->
				<view class="banner">
					<u-swiper :list="bannerData" @change="e => current = e.current" :autoplay="true" circular
						height="318.93rpx">
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in bannerData" :key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>
				<!-- menu -->
				<view class="menu">
					<view class="menu-box">
						<view v-for="(item, index) in menuData" :key="index" class="menu-con">
							<image class="menu-img" :src="item.url"></image>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
					<view class="menu-box">
						<view v-for="(item, index) in menuData" :key="index" class="menu-con">
							<image class="menu-img" :src="item.url"></image>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
				</view>
				<!-- 一卡通 -->
				<image class="settled-image" src="/static/image/home/settled.png" mode="aspectFit"></image>
				<!-- 列表tab切换 -->
				<view class="tab-list-filter">
					<view class="list-tab">
						<view class="tab-box">
							<view v-for="(item,index) in listTabData" :key="index"
								:class="tabActive === index ? 'tab-active' : 'tab'"
								@click="handleTabClick(index, item)">
								<view class="name">{{item.name}}</view>
								<view v-if="tabActive === index" class="line"></view>
							</view>
						</view>
					</view>
					<!-- 筛选 -->
					<view class="list-filter">
						<view class="all-buy">
							<view class="name">全部团购</view>
							<u-icon name="arrow-down" color="#000" size="20rpx" :bold="true"></u-icon>
						</view>
						<view class="all-buy">
							<view class="name">附近</view>
							<u-icon name="arrow-down" color="#000" size="20rpx" :bold="true"></u-icon>
						</view>
						<view class="all-buy">
							<view class="name">智能排序</view>
							<u-icon name="arrow-down" color="#000" size="20rpx" :bold="true"></u-icon>
						</view>
					</view>
					<!-- 推荐筛选-->
					<view class="suggest-filter">
						<view class="suggest-box">
							<view v-for="(item,index) in suggestFilter" :key="index" class="suggest"
								@click="handleSuggestClick(item)">
								<view class="name">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- tab内容 -->
				<view class="tab-content">
					<!-- 精选团购 -->
					<!-- skeletonLoading -->
					<view v-if="tabActive === 0" class="" style="width: 100%;">
						<view v-for="(item, index) in dataList" :key="index" class="list-con" :style="{background: item.isGratia !== 0 ? '#fff' : 'linear-gradient( 90deg, #FEDEE5 0%, #FCF0F0 100%)'}">
							<!-- 今日特惠 -->
							<u-skeleton v-if="item.isGratia === 0" rows="1" :title="false" :rowsWidth="['200%']"
								:rowsHeight="['413.55rpx']" :loading="false">
								<view class="gratia-skeleton-box">
									<view class="title"><span>优质特惠</span>| <span>今日必选爆品</span></view>
									<view class="gratia-con">
										<view class="top">
											<image class="left-img" src="/static/image/home/list.jpeg"></image>
											<view class="name-con-box">
												<view class="name-box">
													<view class="name">{{item.name}}</view>
													<view class="enter-store">
														<view class="name">进店</view>
														<u-icon name="arrow-right" color="#CBCBCB" size="20rpx" :bold="true"></u-icon>
													</view>
												</view>
												<view class="star-box">
													<view class="star">
														<image v-for="i in item.star" :key="i" class="star-img" src="../../../static/image/home/star.png"></image>
														<image v-for="i in (item.allStar - item.star)" :key="i" class="star-img" src="../../../static/image/home/no-star.png"></image>
													</view>
													<view class="range-box">
														<u-icon name="map" color="#CBCBCB" size="18rpx" :bold="true"></u-icon>
														<view class="range">{{item.locationRange}}m</view>
													</view>
												</view>
											</view>
										</view>
										<view class="bottom">
											<image class="left-img" src="/static/image/home/list.jpeg"></image>
											<view class="name-con-box">
												<view class="name-box">
													<view class="name">{{item.name}}</view>
												</view>
												<view class="gratia-mess">
													<span>周一至周日可用</span>
													<span>春霖教育一如既往的专业，评价中的战斗机</span>
												</view>
												<view class="rob-box">
													<view class="rob-left">
														<view class="rob-top">
															<span>¥100</span>
															<span>5折</span>
															<span>¥200</span>
														</view>
														<view class="rob-bottom">
															<image class="hot" src="/static/image/home/hot.png"></image>
															<span>爆卖 99万+，每单省 999.9元</span>
														</view>
													</view>
													<view class="rob-right">
														<span>马上抢</span>
														<u-icon name="arrow-right" color="#fff" size="10rpx" :bold="true"></u-icon>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</u-skeleton>
							<u-skeleton v-else rows="1" :title="false" :rowsWidth="['200%']"
								:rowsHeight="['303.15rpx']" :loading="false">
								<view class="skeleton-box">
									<view class="list-left">
										<image class="left-img" src="/static/image/home/list.jpeg"></image>
										<view class="audition">免费试听</view>
									</view>
									<view class="list-right">
										<view class="name-box">
											<view class="name">{{item.name}}</view>
											<image class="crown" src="/static/image/home/crown.png"></image>
										</view>
										<view class="star-box">
											<view class="star">
												<image v-for="i in item.star" :key="i" class="star-img" src="../../../static/image/home/star.png"></image>
												<image v-for="i in (item.allStar - item.star)" :key="i" class="star-img" src="../../../static/image/home/no-star.png"></image>
											</view>
											<view class="sell">
												季售{{item.sell}}+
											</view>
										</view>
										<view class="location">
											<view class="left">
												<view class="name">{{item.locationName}}</view>
												<view>{{item.agencies}}</view>
											</view>
											<view class="right">
												<u-icon name="map" color="#CBCBCB" size="18rpx" :bold="true"></u-icon>
												<view class="range">{{item.locationRange}}m</view>
											</view>
										</view>
										<view class="attestation">
											<view class="teacher-num">{{item.attestationNum}}位认证老师</view>
										</view>
										<view v-if="!item.tuan" class="tuan-buy">
											<view class="tuan">团</view>
											<view class="tuan-con">{{item.tuanCon}}</view>
										</view>
										<view v-if="!item.free" class="free-buy">
											<view class="free">免</view>
											<view class="free-con">{{item.freeCon}}</view>
										</view>
									</view>
								</view>
								
							</u-skeleton>
						</view>
					</view>
					<!-- 热门培训 -->
					<view v-if="tabActive === 1" class="">
						热门培训
					</view>
					<!-- 单人培训 -->
					<view v-if="tabActive === 2" class="">
						单人培训
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		
	} from '@/api/home.js'
	export default {
		data() {
			return {
				// 手机顶部信息栏高度
				statusBarHeight: 0,
				// 头部内容高度
				screenTop: 0,
				// 头部高度
				navBarHeight: 0,
				// banner下标
				current: 0,
				// banner
				bannerData: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				// menu
				menuData: [{
						id: 1,
						url: '/static/image/home/1.png',
						name: '美术'
					},
					{
						id: 2,
						url: '/static/image/home/2.png',
						name: 'CAD'
					},
					{
						id: 3,
						url: '/static/image/home/3.png',
						name: '会计'
					},
					{
						id: 4,
						url: '/static/image/home/4.png',
						name: '建造师'
					},
					{
						id: 5,
						url: '/static/image/home/5.png',
						name: '监理'
					},
					{
						id: 6,
						url: '/static/image/home/6.png',
						name: '驾校'
					},
					{
						id: 7,
						url: '/static/image/home/1.png',
						name: '美术'
					},
					{
						id: 8,
						url: '/static/image/home/2.png',
						name: 'CAD'
					},
					{
						id: 9,
						url: '/static/image/home/3.png',
						name: '会计'
					},
					{
						id: 10,
						url: '/static/image/home/4.png',
						name: '建造师'
					},
					{
						id: 11,
						url: '/static/image/home/5.png',
						name: '监理'
					},
					{
						id: 12,
						url: '/static/image/home/6.png',
						name: '驾校'
					},
				],
				// listTab
				listTabData: [{
					id: 0,
					name: '精选团购'
				}, {
					id: 1,
					name: '热门培训',
					// badge: {
					// 	isDot: true
					// }
				}, {
					id: 2,
					name: '单人培训',
				}],
				// 选中tab下标
				tabActive: 0,
				// 推荐筛选数据
				suggestFilter: [{
					id: 0,
					name: '附近1km'
				}, {
					id: 1,
					name: 'CAD',
				}, {
					id: 2,
					name: '厨师',
				}, {
					id: 3,
					name: '建造师'
				}, {
					id: 4,
					name: '会计',
				}, {
					id: 5,
					name: '项目经理',
				}, {
					id: 6,
					name: 'java'
				}, {
					id: 7,
					name: 'python',
				}, {
					id: 8,
					name: 'go',
				}, {
					id: 9,
					name: '裱花师'
				}, {
					id: 10,
					name: '甜点师',
				}, {
					id: 11,
					name: '外卖员',
				}],
				
				// 列表数据
				dataList: [{
					id: 0,
					name: '春霖教育电脑培训（鹅岭店）',
					star: 4,
					allStar: 5,
					sell: 700,
					locationName: '袁家岗',
					locationRange: 300,
					agencies: '美术培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '6.8元【7-9】美术体验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】',
					isGratia: 0
					
				}, {
					id: 1,
					name: '学博教育',
					star: 3,
					allStar: 5,
					sell: 200,
					locationName: '两路口',
					locationRange: 300,
					agencies: '篮球培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '3.1元【7-9】验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 2,
					name: '春霖教育电脑培训（鹅岭店）',
					star: 4,
					allStar: 5,
					sell: 700,
					locationName: '袁家岗',
					locationRange: 300,
					agencies: '美术培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '6.8元【7-9】美术体验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 3,
					name: '学博教育',
					star: 3,
					allStar: 5,
					sell: 200,
					locationName: '两路口',
					locationRange: 300,
					agencies: '篮球培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '3.1元【7-9】验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 4,
					name: '春霖教育电脑培训（鹅岭店）',
					star: 4,
					allStar: 5,
					sell: 700,
					locationName: '袁家岗',
					locationRange: 300,
					agencies: '美术培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '6.8元【7-9】美术体验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 5,
					name: '学博教育',
					star: 3,
					allStar: 5,
					sell: 200,
					locationName: '两路口',
					locationRange: 300,
					agencies: '篮球培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '3.1元【7-9】验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 6,
					name: '春霖教育电脑培训（鹅岭店）',
					star: 4,
					allStar: 5,
					sell: 700,
					locationName: '袁家岗',
					locationRange: 300,
					agencies: '美术培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '6.8元【7-9】美术体验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 7,
					name: '学博教育',
					star: 3,
					allStar: 5,
					sell: 200,
					locationName: '两路口',
					locationRange: 300,
					agencies: '篮球培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '3.1元【7-9】验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 8,
					name: '春霖教育电脑培训（鹅岭店）',
					star: 4,
					allStar: 5,
					sell: 700,
					locationName: '袁家岗',
					locationRange: 300,
					agencies: '美术培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '6.8元【7-9】美术体验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 9,
					name: '学博教育',
					star: 3,
					allStar: 5,
					sell: 200,
					locationName: '两路口',
					locationRange: 300,
					agencies: '篮球培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '3.1元【7-9】验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 10,
					name: '春霖教育电脑培训（鹅岭店）',
					star: 4,
					allStar: 5,
					sell: 700,
					locationName: '袁家岗',
					locationRange: 300,
					agencies: '美术培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '6.8元【7-9】美术体验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}, {
					id: 11,
					name: '学博教育',
					star: 3,
					allStar: 5,
					sell: 200,
					locationName: '两路口',
					locationRange: 300,
					agencies: '篮球培训',
					attestationNum: 4,
					tuan: 0,
					tuanCon: '3.1元【7-9】验课1节',
					free: 0,
					freeCon: '暑假集训【大班基础】'
				}],
				// 是否下拉刷新
				isRefreshing: false,
				// 骨架屏loading
				skeletonLoading: true
			};
		},
		onShow() {

		},
		mounted() {
			this.systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = uni.getStorageSync('statusBarHeight');
			this.screenTop = uni.getStorageSync('screenTop');
			this.navBarHeight = uni.getStorageSync('navBarHeight');
			console.log(this.statusBarHeight, this.screenTop, this.navBarHeight)
		},
		methods: {
			// 自定义下拉刷新被触发
			onRefresh() {
				this.isRefreshing = true;
				setTimeout(() => {
					this.isRefreshing = false;
				}, 1000); // 模拟异步请求延迟
			},
			// 自定义下拉刷新被复位
			onRestore() {},
			onPulling() {},
			// 自定义下拉刷新被中止
			onAbort() {},
			// tab切换事件
			handleTabClick(index, item) {
				this.tabActive = index;
			},
			// 推荐筛选
			handleSuggestClick(item) {},
			// 搜索
			searchHandle() {
				uni.navigateTo({
					url: '/subPackages/searchView/searchView'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss'
</style>